<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="tab_wrapper">
            <el-table
              :data="btnList"
              style="width: 100%"
              align='center'
              :header-cell-style="{background:'#eef1f6'}"

            >
              <el-table-column
                prop="sort"
                label="排序"
                align="center"
                width="50"
              />

              <el-table-column
                prop="id"
                label="ID"
                align="center"
              />

              <el-table-column
                prop="createTime"
                label="创建时间"
                :formatter="formatDate"
                align="center"
              />

              <el-table-column
                prop="title"
                label="名字"
                align="center"
              />

              <el-table-column
                prop="img"
                label="图片"
                align="center"
              >
                <template slot-scope="scope">
                  <img :src="scope.row.img" min-width="70" height="70"/>
                </template>
              </el-table-column>

              <el-table-column
                label="是否启用"
                align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.isOpen == 0"> 是 </span>
                  <span v-if="scope.row.isOpen != 0 "> 否 </span>

                </template>
              </el-table-column>

              <el-table-column
                align='center'
                label="操作">
                <template slot-scope='scope'>

                  <span v-if="scope.row.isOpen ==0">
                     <el-button
                       type="text"
                       size="mini"
                       @click="alterGoodsClassify(scope.row.id, 1)"
                     >
                       开启
                  </el-button>
                  </span>

                  <span v-if="scope.row.isOpen !=0">
                     <el-button
                       type="text"
                       size="mini"
                       @click="alterGoodsClassify(scope.row.id, 0)"
                     >
                     关闭
                  </el-button>
                  </span>

                  <el-button
                    type="text"
                    size="mini"
                    @click="showDialog(1, scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>


            <div class="table-footer">
              <el-row>
                <el-col>
                  <el-button @click="showDialog(3)">
                    添加
                  </el-button>
                </el-col>
              </el-row>
            </div>


            <el-dialog title="提示" :visible.sync="delVisible" width="350px" center :modal-append-to-body="false">
              <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow()">确 定</el-button>
              </div>
            </el-dialog>

            <!-- banner提示框 -->
            <el-dialog :visible.sync="bannerVisible" width="50%" center :modal-append-to-body="false">
              <div>
                <el-form :model="addFormParams" label-width="120px">
                  <el-row>
                    <el-col>
                      <div class="dialog-title">
                        <span v-if="dialogNum == 1">添加菜单按钮</span>
                        <span v-if="dialogNum == 2">修改菜单按钮</span>
                      </div>
                    </el-col>
                    <el-col>


                      <el-form-item label="按钮排序:">
                        <el-input v-model="addFormParams.sort" size="mini" placeholder="请输入排序"></el-input>
                      </el-form-item>


                      <el-form-item label="按钮名称:">
                        <el-input v-model="addFormParams.title" size="mini" placeholder="请输入名称"></el-input>
                      </el-form-item>


                      <el-form-item label="图片上传">
                        <el-upload
                          class="avatar-uploader"
                          action="http://www.ccppvip.com:8081/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess">
                          <img width="50%" v-if="addFormParams.img" :src="addFormParams.img" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                      </el-form-item>

                    </el-col>
                    <el-col>
                      <el-form-item>
                        <el-button @click="closeDialog">取消</el-button>
                        <el-button v-if="num == 3" type="primary" @click="saveCoodsClassify">确定</el-button>
                        <el-button v-if="num == 2" type="primary" @click="getChangeBtn">确定</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-dialog>

          </div>
          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import pagination from '../../common/pagination'

  import bread from '../../common/bread'
  import {queryGoodsClassify, delGoodsClassify, saveGoodsClassify, alterGoodsClassify} from '../../api/api';
  import {formatDate} from '../../utils/utils';
  import '../../config'


  export default {
    data() {
      return {
        btnList: [],
        codeList: [],
        delVisible: false,
        bannerVisible: false,
        dialogNum: 1,
        bannerParams: {
          pageNum: 1,
          pageSize: 10
        },
        pageTotal: 0,
        addFormParams: {
          title: '',
          sort: '',
          img: ''
        },
        alterFormParams: {
          id: '',
          isOpen: ''
        },
        delFormParams: {
          id: ''
        },
        formData: '',
        num: ''
      }
    },
    mounted() {
      this.getBtnList()
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.addFormParams.img = URL.createObjectURL(file.raw)
        this.addFormParams.img = JSON.parse(res.slice(5)).data.split('?')[0]
        console.log(this.addFormParams.img)
      },
      // 上下分页
      handleCurrentChange(val) {
        this.btnList.pageNum = val
        this.getBtnList()
      },
      // 每页显示多少条
      handleSizeChange(val) {
        this.btnList.pageSize = val
        this.getBtnList()
      },

      closeDialog() {
        this.bannerVisible = false
        this.delVisible = false
      },
      showDialog(num, row) {
        this.num = num
        console.log(this.num)
        if (num === 2) {
          console.log(row)
          this.addFormParams.id = row.id
          this.addFormParams.img = row.img
          this.addFormParams.sort = row.sort
          this.addFormParams.title = row.title
          this.bannerVisible = true
          // eslint-disable-next-line eqeqeq
        } else if (num == 1) {
          this.delFormParams.id = row.id
          this.delVisible = true
        } else {
          this.bannerVisible = true
          this.clearForm()
        }
        this.dialogNum = num
      },
      getBtnList() {
        const para = Object.assign({}, this.bannerParams)
        queryGoodsClassify(para).then(res => {
          console.log(res)
          this.btnList = res.data.list
          this.pageTotal = res.data.total
        })
      },
      // 格式化表单数据
      clearForm() {
        this.addFormParams = {
          id: '',
          img: '',
          sort: '',
          title: ''
        }
      },
      deleteRow() {
        const para = Object.assign({}, this.delFormParams)
        delGoodsClassify(para).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 0) {
            this.closeDialog()
            this.getBtnList()
            this.$toast('删除成功')
          } else {
            this.$toast(res.msg)
          }
        })
      },
      alterGoodsClassify(id, isOpen) {
        this.alterFormParams.id = id
        this.alterFormParams.isOpen = isOpen
        const para = Object.assign({}, this.alterFormParams)
        // eslint-disable-next-line no-undef
        alterGoodsClassify(para).then(res => {
          if (res.code === 0) {
            this.getBtnList()
            this.$toast('修改成功')
          } else {
            this.$toast(res.msg)
          }
        })
      },

      formatDate(row, column) {
        let date = row[column.property]
        date = new Date(date)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },

      saveCoodsClassify() {
        const para = Object.assign({}, this.addFormParams)
        saveGoodsClassify(para).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 0) {
            this.closeDialog()
            this.getBtnList()
            this.$toast('添加成功')
          } else {
            this.$toast(res.msg)
          }
          // if (res.status)
        })
      }
    },

    components: {
      pagination,
      bread
    }
  }
</script>


<style lang='scss'>
  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .dialog-title {
      margin: 0 0 30px;
      text-align: center;
      font-size: 20px;
    }
  }
</style>

